<template>
	<div>
		<header-view></header-view>
		<div class="entrust-img">
			<img src="../assets/images/entrust.png">
			<div class="entrust-img-wrap">
				<div class="entrust-img-text">
					<p>委托我们  让租厂更简单</p>
				</div>
			</div>
		</div>
		<div class="entrust-list">
			<div>
				<img src="../assets/images/need.png">
				<p>提交需求</p>
			</div>
			<div>
				<img src="../assets/images/drone.png">
				<p>线下航拍</p>
			</div>
			<div>
				<img src="../assets/images/match.png">
				<p>资源匹配</p>
			</div>
			<div>
				<img src="../assets/images/deal.png">
				<p>快速成交</p>
			</div>
		</div>
		<div class="entrust-content-wrap">
			<div class="entrust-content-top">
				<h1>委托类型</h1>
				<ul>
					<li v-for="(entrustList,index) in entrustList"><div :class="{on:(indexs == index)}" @click="selectEntrust(entrustList.id,index)">{{ entrustList.name }}</div></li>
				</ul>
				<div class="line"></div>
				<h1>租售类型</h1>
				<ul>
					<li v-for="(rentList,index) in rentList"><div :class="{on:(indexs1 == index)}" @click="selectRent(rentList.id,index)">{{ rentList.name }}</div></li>
				</ul>
			</div>
			<div class="entrust-content-input">
				<input type="text" name="" placeholder="请输入您的称呼" v-model="entrustName">
			</div>
			<div class="entrust-content-input">
				<input type="text" name="" placeholder="请输入手机号码" v-model="entrustNum">
			</div>
			<div class="entrust-content-input">
				<textarea placeholder="请描述您的需求，如：我有中山2000方厂房想出售，独院标准结构、空地大等。" v-model="entrustText"></textarea>
			</div>
		</div>
		<div class="entrust-content-bottom">
				<div class="entrust-content-submit" @click="entrust">提交需求</div>
				<p class="error">{{ error }}</p>
				<div class="entrust-content-num">
					<div>您可以拨打客服热线</div>
					<p>020-34803888</p>
				</div>
			</div>
		<footer-view1></footer-view1>
		<footer-view></footer-view>
        <alert :message='message' v-if="openMessage" @closeBtn="closeMessage"></alert>
	</div>
</template>

<script>
	import alert from "./public/alert"
	export default{
		name:'entrust',
		components:{alert},
		data(){
			return{
				entrustList:[
					{name:'厂房',type:0},
					{name:'产业园',type:1},
					{name:'土地',type:2},
					{name:'其他',type:3}
				],
				rentList:[
					{name:'我要出租',type:0},
					{name:'我要出售',type:1}
				],
				indexs:'',
				indexs1:'',
				rentId:0,
				entrustId:0,
				entrustName:'',
				entrustNum:'',
				entrustText:'',
				error:'',
				openMessage:false,
				message:''
			}
		},
		created(){
			this.toTop()
		},
		methods:{
			selectEntrust(v,n){
				this.entrustId = v,
				this.indexs = n
			},
			selectRent(v,n){
				this.rentId = v,
				this.indexs1 = n
			},
			toTop() {
                window.scrollTo(0,0);
            },
			entrust(){
				var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
				if(this.entrustName == ''){
					this.error = '您的称呼不能为空'
				} else if( this.entrustNum == '' ){
					this.error = '您的手机号不能为空'
				} else if( this.entrustText == ''){
					this.error = '您的需求不能为空'
				}else if(!reg.test(this.entrustNum)){
                  this.error = '手机格式不正确'
                }else{
                	this.$post('/api/release/1',{bail_type:this.entrustId,rent_sale:this.rentId,name:this.entrustName,telephone:this.entrustNum,desc:this.entrustText}).then(res=>{
						if (res.code == 0) {
							this.openMessage = true
							this.message = '提交成功'
							this.entrustName = ''
							this.entrustNum = ''
							this.entrustText = ''
							this.error = ''
						}
					})
                }
			},
			closeMessage(){
				this.openMessage = false
			}
		}
	}
</script>

<style scoped>
	.entrust-img{
		position: relative;
	}
	.entrust-img-wrap{
		display: -webkit-flex;
		align-items:center;
		justify-content:center; 
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
	}
	.entrust-img-text{
		vertical-align: middle;
	}
	.entrust-img-text p{
		font-size: 30px;
		color: #fff;
		padding-bottom: 5px;
		border-bottom: 2px solid #fff;
	}
	.entrust-list{
		display: flex;
		display: -webkit-flex;
		margin: 20px 0;
	}
	.entrust-list div{
		display: block;
		flex: 1;
		text-align: center;
	}
	.entrust-list div img{
		margin: 0 auto;
		width: 40px;
		height: 40px;
	}
	.entrust-list div p{
		font-size: 16px;
		color: #a4a5a5;
		margin-top: 10px;
	}
	.entrust-content-wrap{
		padding: 0 15px;
	}
	.entrust-content-top{
		padding: 5px 18px 10px;
		background-color: #fff;
	}
	.entrust-content-top h1{
		font-size: 14px;
		color: #333;
		font-weight: normal;
		margin-top: 18px;
		margin-bottom: 18px;
	}
	.entrust-content-top ul{
		overflow: hidden;
	}
	.entrust-content-top li{
		box-sizing: border-box;
		float: left;
		width: 33.333%;
		padding-right: 20px;
		margin-bottom: 18px;
	}
	.entrust-content-top li div{
		height: 30px;
		line-height: 30px;
		text-align: center;
		font-size: 16px;
		color: #717171;
		background-color: #eeeeee;
		border-radius: 3px;
	}
	.entrust-content-top li div.on{
		background-color: #e6222a;
		color: #fff;
	}
	.line{
		height: 1px;
		background-color: #eee;
	}
	.entrust-content-input,.entrust-content-bottom{
		margin-top: 16px;
	}
	.entrust-content-input input{
		box-sizing: border-box;
		width: 100%;
		padding-left: 15px;
		height: 56px;
		line-height: 54px;
		font-size: 16px;
		color: #949292;
		background-color: #fff;
		outline: none;
		border: 1px solid #f4f4f4;
	}
	.entrust-content-input textarea{
		width: 100%;
		min-height: 190px;
		padding: 20px 15px;
		font-size: 16px;
		color: #949292;
		background-color: #fff;
		outline: none;
		border: none;
	}
	.entrust-content-submit{
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		background-color: #d0001c;
	}
	.entrust-content-num{
		padding: 35px 0;
		background-color: #fff;
	}
	.entrust-content-num div{
		font-size: 16px;
		line-height: 20px;
		color: #6a6a6a;
		text-align: center;
	}
	.entrust-content-num p{
		font-size: 16px;
		color: #d0001c;
		text-align: center;
	}
	.error{
		padding: 5px 0;
		text-align: center;
		color: #d0001c;
		background-color: #fff;
	}
</style>